<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <style>
          body{
background-color: #ededed; padding: 10px;
          }  header{ background-color: #ededed; width: 100%;height: 50px;}
            header ul li {background-color: #ededed; height: 50px; line-height: 50px; text-align: left; display: none; color: #323237; position: relative;font-size: 18px;text-indent: 10px;}
            header ul li.active{ display: block; }
            .fl{float: left;}
            .jt img{height: 18px; margin-top: 15px;margin-left: 15px; padding-right: 5px}
           .fr{float: right;}
              .sz img{height: 18px;margin-top: 15px;padding-right: 15px}
              #footer{height: 56px;background-color: #f4f4f4; border-top: 0.8px solid #e5e5e5; text-align: center;line-height: 56px; }
              #footer button{border: none;background-color: #07c160;color: #ffffff;padding: 8px;border-radius:3px; font-size: 12px}


              .flex-con{
                overflow: auto
              }

              .search-box {
                width: 90%;
                height: 38px; float: left; margin-left: 5px;
              }
              .search {
                width:85%;
                height:38px;border-radius:3px;background: #ffffff; padding-left: 5px;padding-right: 5px;float: left;
              }
              .qx{float: right; line-height: 38px; color: #5b6a91}
.fdj{float: left; padding-top:8px} .fdj img{height: 22px}
      </style>
  </head>
  <body>
    <div id="wrap" class="flex-wrap flex-vertical">
    <header id="header">
        <div class="search">
          <div class="fdj"><img src="../image/search.png" ></div>
      <div class="search-box" id="search-box">

    </div></div> <div class="qx" tapmode onclick="api.closeWin();">取消</div>
    </header>
    <div id="main" class="flex-con">

    </div>

  </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/H5UiInput.js"></script>
  <script type="text/javascript">
      apiready = function(){
    $api.fixStatusBar( $api.dom('header') );


      var header = $api.byId('header');
        var footer = $api.byId('footer');
          //适配iOS 7+，Android 4.4+状态栏
          header.style.paddingTop = api.safeArea.top +"px" ;


          // var H5UiInputStyle = {
          //     bgColor: '#ffffff', //（可选项）字符串类型；输入框的背景色，支持 rgb、rgba、#；默认：'#fff'
          //     size: 14, //（可选项）数字类型；输入框的文字大小；默认：14
          //     color: '#000', //（可选项）字符串类型；输入框内的字体颜色，支持 rgb、rgba、#；默认：'#000'
          //     cursorColor: '#4169E1', //（可选项）字符串类型；输入框内的光标颜色，支持 rgb、rgba、#；默认：'#4169E1'（该参数仅对ios有效，需要配置android的光标样式可参考 **模块接口** 说明）
          //     placeholder: {
          //       color: '#ccc' //（可选项）字符串类型；输入框占位文字的颜色；默认：'#ccc'
          //     }
          //   };
          //   var H5UiInputAutoFocus = true; // 可选,默认true
          //   var H5UiInputPlaceholder = '搜索'; //（可选项）输入框的占位提示文本
          //   var H5UiInputKeyboardType = 'search' //搜索键盘，Android只有在单行模式下支持）
          //   $H5UiInput.openUIInput('.search-box', H5UiInputStyle, H5UiInputAutoFocus, H5UiInputPlaceholder, H5UiInputKeyboardType, function(ret, H5uiInput) {
          //     if (ret.eventType == 'search') {
          //
          //     }
          //   });


          var UIInput = api.require('UIInput');



          UIInput.open({
              rect: {
                  x: 40,
                  y: api.safeArea.top+10,
                  w: 200,
                  h: 38
              },
              styles: {
                  bgColor: '#fff',
                  size: 14,
                  color: '#000',
                  placeholder: {
                      color: '#ccc'
                  }
              },
              autoFocus: true,
              maxRows: 1,
              placeholder: '搜索',
              keyboardType: 'search',
              fixedOn: api.frameName
          }, function(ret) {
              if (ret.eventType == 'change') {
              } else {
                //  alert(JSON.stringify(ret));
              }
          });


            api.openFrame({
              name: 'searchFrame',
              url: 'searchFrame.html',

              rect: {
                x:0,
                y:api.safeArea.top+50,
                 w: 'auto',
                h:  api.winHeight- api.safeArea.top-40
              }
            });

    };


function suru(msg){
  var UIInput = api.require('UIInput');
UIInput.value({
    msg: msg
});

}

  </script>
  </html>
